<template>
  <!-- 整个页面的容器 -->
  <div class="common-layout">
    <!-- 主容器，分为头部、侧边栏和主体 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header class="headContainer">
        <!-- 头部左侧内容 -->
        <div class="headLeft">
          商城后台管理系统
        </div>
        <!-- 头部右侧内容，如头像和导航栏 -->
        <div class="headRight">
          <div class="avatar">
            <el-avatar :size="46" src="../public/img/avatar.png"></el-avatar>
            <!-- <el-avatar size="30px" :src="avatar"></el-avatar> -->
          </div>
          <div class="currentUser" v-on:mouseenter="currentUserouseenter" v-on:mouseleave="currentUserMousleave">
            <div class="currentUserText"> {{ nick }}</div>
            <div v-show="isShowDropDown" class="currentUseDropdown">

              <!-- 三角形 -->
              <div class="arangle"></div>
              <div class="dropdown" style="">
                <div style="padding: 7px 12px; " @click="currentUserItemClick">选项1</div>
                <div style="padding: 7px 12px;" @click="currentUserItemClick">选项2</div>
                <div style="padding: 7px 12px;" @click="currentUserItemClick">选项3</div>
              </div>
            </div>
          </div>

          <!-- <div>操作</div> -->

          <!-- 使用element的下拉菜单 -->
          <!-- <el-dropdown>
            <span class="el-dropdown-link">
              Dropdown List
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
                <el-dropdown-item>Action 2</el-dropdown-item>
                <el-dropdown-item>Action 3</el-dropdown-item>
                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                <el-dropdown-item divided>Action 5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
</el-dropdown> -->

        </div>
      </el-header>
      <!-- 侧边栏和主体内容容器 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside class="asideContainer" width="200px">
          <!-- 菜单列表 -->
          <el-menu :default-active="menuIndex" class="el-menu-vertical-demo">
            <!-- 菜单项 -->
            <el-menu-item v-for="(item, index) in menuArr" @click="menuClick" :index="index.toString()">
              <!-- 菜单项图标，使用动态组件 -->
              <el-icon>
                <component :is="menuIconComponentArr[item.icon]" />
              </el-icon>
              <!-- 菜单项标题 -->
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主体内容 -->
        <el-container>
          <!-- 主体内容区域 -->
          <el-main class="mainContainer">
            <!-- 标签页 -->
            <div>
              <!-- 标签页组件，可以切换和关闭 -->
              <el-tabs v-model="currentTabIndex" type="card" class="demo-tabs" closable @tab-remove="removeTab"
                @tab-change="changeTab">
                <!-- 标签页内容 -->
                <el-tab-pane v-for="item in tabArr" :key="item.name" :label="item.title" :name="item.name">
                  <!-- 标签页内容区域，可以放置其他组件或内容 -->
                  <div class="contentContainer">
                    <!-- 表格组件 -->
                    <!-- <TableComponents></TableComponents> -->

                    <!-- 组件不会被销毁 -->
                     <router-view v-slot="{Component}">
                      <keep-alive>
                        <component :is="Component" />
                      </keep-alive>
                     </router-view>
                    <!-- <RouterView></RouterView> -->
                  </div>

                </el-tab-pane>
              </el-tabs>
            </div>


          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">

//
import { get } from '../network/index.js'
// 引入pinia
import { useSysUserStore } from '../stores/counter.js'
//获取pinia的实例
let useSysUserSto = useSysUserStore();
//定时验证过期时间的秒值
let expire=1000*60*9
//开始计时，记录登录时间，验证是否有操作
//开始时间
let startDate = new Date()
//十分钟后的时间、结束时间=开始时间+10分钟
let endDate = new Date(startDate.getTime() + expire)
// //从pinia中获取用户信息
// let lastActionDate =new Date(useSysUserSto.lastActionDate) ;


//打开一个定时器
let interval=  setInterval(() => {
  //从pinia中获取用户信息
  let lastActionDate = new Date(useSysUserSto.lastActionDate);

  // console.log('开始时间',startDate);
  // console.log('结束时间',endDate);
  // console.log('上次操作时间',lastActionDate);
  //从pinia中获取用户信息
  // 判断是否在十分钟内操作
  if (lastActionDate < endDate && lastActionDate > startDate) {
    //发布异步请求
    get("http://localhost:5079/JWT/GetToken", {
    }).then((res) => {
      if (res.code == 0) {
        //将token更新到pinia中
        useSysUserSto.lastActionDate = res.data.token

        // 获取新token成功
        //重新赋值开始时间和结束时间
        startDate = new Date()
        endDate = new Date(startDate.getTime() + expire)
      }

    }).catch(() => { })
    console.log('在十分钟内操作');
  } else {
    console.log('超过十分钟，请重新登录');

    //关闭定时器
    clearInterval(interval);
  }

}, expire);



//引入路由器对象
import { useRouter } from 'vue-router';
let rotuer = useRouter()
//判断当前pinia中的用户信息是否为空，为空就跳转回登录页
//引入pinia
// import {useSysUserStore} from "../stores/counter";


console.log(useSysUserSto.token)

if (!useSysUserSto.token) {
  rotuer.replace('/login')
}


//使用自定义表格组件
import TableComponents from '../components/TableComponents.vue'

let isShowDropDown = ref(false)
//个人信息下拉选被点击
function currentUserouseenter() {
  isShowDropDown.value = true
}
//个人信息下拉选失去焦点
function currentUserMousleave() {
  isShowDropDown.value = false

}
//个人信息下拉选被点击
function currentUserItemClick() {
  console.log("个人信息下拉选被点击")
}
// 头像
// import avatar from "./assets/img/avatar.png"
// 导入Vue的响应式引用函数
import { ref } from 'vue'
// 导入Element Plus的图标组件
import {
  Document,
  DocumentRemove,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import router from '../router/index.js';

// 菜单默认选中项
let menuIndex = ref('-1')
// 定义菜单的数组，包含菜单标题和图标
let menuArr = ref([
  { title: '用户管理', icon: 'Setting' ,path:'/Home/SysUserTable'},
  { title: '商品属性类别表', icon: 'Document' ,path:'/Home/ProductAttributeCategoryTable'},
  { title: '商品管理', icon: 'Location' },
  { title: '分类管理', icon: 'IconMenu' }
])

// 将图标名称映射到对应的图标组件
let menuIconComponentArr = { Location, Document, Setting, IconMenu }

// 菜单点击事件处理函数
function menuClick(target) {
  // 获取点击的菜单数据
  let menuData = menuArr.value[target.index]
  // console.log(menuData)
  // 调用添加标签页的函数
  addTab(menuData.title, target.index)


  //路由跳转
  router.push(menuData.path)

  // console.log(target.index)
  //选中那个菜单就修改菜单的索引值
  menuIndex.value = target.Index
}

let tabIndex = 0
// 当前选中的tab索引
let currentTabIndex = ref('0')
// tabs标签页的数组
const tabArr = ref([])

// 为tab数组添加一个新的tab数据
const addTab = (targetName, targetIndex) => {
  // 判断是否已经存在同名的tab
  // console.log(menuIndex)

  let b = tabArr.value.some(item => item.title == targetName)
  // 如果不存在，则添加新的tab
  if (!b) {
    const newTabName = `${++tabIndex}`
    // const newTabName = `${(tabArr.value.length + 1).toString()}`
    tabArr.value.push({
      title: targetName,
      name: newTabName,
      content: targetName,
    })
    currentTabIndex.value = newTabName
  } else {
    // 如果存在，则切换到该tab
    let tabData = tabArr.value.find(item => item.title == targetName)
    currentTabIndex.value = tabData.name
  }
}

// tab标签页关闭事件处理函数
const removeTab = (targetName) => { //点击关闭的索引4
  // 移除标签页并更新当前选中的标签页
  // debugger
  // console.log('开始', menuIndex.value)

  const tabs = tabArr.value
  let activeName = currentTabIndex.value//当前显示的索引4
  if (activeName === targetName) {//如果是当前显示的，则执行
    tabs.forEach((tab, index) => {
      //判断数组中那一条是要被关闭的tab
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        //判断tab后面和前面还有没有页面
        if (nextTab) {
          activeName = nextTab.name

          //遍历导航对象数组拿到索引
          for (let index = 0; index < menuArr.value.length; index++) {
            if (menuArr.value[index].title === nextTab.title) {
              menuIndex.value = index.toString()
              break
            }

          }
          //先找到当前准备选择tab标签中的tilet
        } else {
          // debugger
          //没有任何的tab清除掉导航选择

          // if( menuIndex.value==='-2'){
          //   menuIndex.value = '-3';
          // }else{
          // menuIndex.value = '-2';
          // }
          menuIndex.value = '-2';
          // console.log(menuIndex.value) 
        }
      }
    })
  }




  // debugger
  currentTabIndex.value = activeName
  tabArr.value = tabs.filter(tab => tab.name !== targetName)
}

// 标签tab切换时触发的事件处理函数
function changeTab(name) {
  // 根据tab的name值找到对应的菜单项并更新菜单索引
  // console.log(tabArr.value)s
  let tabData = tabArr.value.find(item => item.name == name)
  for (let index = 0; index < menuArr.value.length; index++) {
    const element = menuArr.value[index];
    if (tabData.title == element.title) {
      menuIndex.value = index.toString()
      // console.log(index.toString())

      //拿到菜单数据中对应的对象
      // console.log(menuArr.value[index])
      rotuer.push( menuArr.value[index].path)
     
      break
    }
  }
}

//赋值当前登陆人昵称

//首页昵称
let nick = ref('admin')
//创建pinia对象实例

//获取pinia中的数据
if (useSysUserSto.nick) {
  nick.value = useSysUserSto.nick;
}
</script>
<style scoped>
/* 整个容器的高度设置 */
.el-container {
  height: calc(100vh - 60px);
}

/* 头部容器样式 */
.headContainer {
  background-color: gray;
  display: flex;
  position: relative;
}

/* 头部左侧内容样式 */
.headContainer .headLeft {
  width: 200px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
}

/* 头部右侧内容样式 */
.headContainer .headRight {
  display: flex;
  margin-right: 20px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  right: 0;
}

/* 头像样式 */
.headContainer .headRight .avatar {
  padding-top: 8px;
  ;
}

/* 当前登陆人 */
.headContainer .headRight .currentUser {
  /* margin: 0 20px; */
  font-size: 20px;
  position: relative;
}

.headContainer .headRight .currentUser .currentUserText {
  padding: 0 20px;
}

/* 三角形 */
.headContainer .headRight .currentUser .arangle {
  width: 0;
  height: 0;
  border: 8px solid;

  /* 上下左右 */
  border-color: transparent transparent white transparent;
  /* display: inline-block; */
  position: absolute;
  top: 34px;
  right: 28px;
  z-index: 101;
}

.headContainer .headRight .currentUser .dropdown {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid white;
  background-color: white;

  line-height: 22px;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  right: -14px;
  top: 50px;
  z-index: 100;
  width: 100px;
  text-align: center;
}

/* 去掉下拉 */
.el-dropdown-link:focus-visible {
  outline: unset;
}

/* 侧边栏样式导航的外边框 */
.asideContainer {
  background-color: cornflowerblue;
}

/* .demo-tabs{
  background-color: tomato;
} */


/* 主体 */
/* 主体内容区域样式 */
.mainContainer {
  background-color: #d5d5d590;
  padding: 0;
}

/* 内容区域样式 */
.mainContainer .contentContainer {
  padding: 0 15px;
}

/* tab标签页如果class样式无效（组件别人框架生成的），使用::v-deep()来改 */
::v-deep(.el-tabs__header) {
  background-color: white;
}
</style>